/* eslint-disable react/jsx-key */
/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-10-24 08:58:38
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-10-24 10:31:32
 * @FilePath: /wbn/src/components/CompanyName/index.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import ProDescriptions from '@ant-design/pro-descriptions';
import React, { useState, useEffect } from 'react';
import { Tooltip, Modal, Image, Popover, Tag } from 'antd';
import { FileAddFilled, FileFilled } from '@ant-design/icons';
import Note from './note';
import CompanyDetail from '../CompanyDetail';
import { useRequest } from 'ahooks';
import { getFetch } from '@/utils/doFetch';
import { companydetail } from '@/services/business';

function CompanyName({ row }) {
  const id = row['id'];
  const [iftype, ciftype] = useState({
    open: false,
    onCancel: () => {
      ciftype((s) => ({
        ...s,
        open: false,
      }));
    },
  });

  const icon = row?.is_note ? (
    <FileFilled
      style={{ color: '#1890ff' }}
      onClick={() => {
        ciftype({
          ...iftype,
          val: 'note',
          title: `${row?.name}的记事本`,
          open: true,
        });
      }}
    />
  ) : (
    <FileAddFilled
      style={{ color: '#ff4800' }}
      onClick={() => {
        ciftype({
          ...iftype,
          val: 'noteadd',
          title: `新增${row?.name}的记事本`,
          open: true,
        });
      }}
    />
  );

  const domconfig = {
    see: <CompanyDetail id={row?.id} />,
    note: <Note val={'note'} company_id={row?.id} />,
    noteadd: <Note val={'noteadd'} company_id={row?.id} />,
  };

  const { data, loading, run } = useRequest(
    async () => {
      if (!id) return;
      let res = await companydetail({ id });
      return res?.data;
    },
    {
      manual: true,
      debounceWait: 400,
    },
  );

  return (
    <>
      <Modal
        maskClosable={false}
        {...iftype}
        footer={false}
        width={1400}
        destroyOnClose={true}
        style={{ top: 20 }}
      >
        {domconfig[iftype.val]}
      </Modal>
      <Tooltip title={row.name}>
        <div className="centerl" style={{ gap: 10 }}>
          {icon}
          <Popover
            placement="bottom"
            onOpenChange={(vs) => {
              if (vs) {
                run();
              }
            }}
            content={
              <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                {data?.company_tags?.map?.((it) => (
                  <Tag key={it?.tag_name}>{it.tag_name}</Tag>
                ))}
                {data?.company_tags?.length == 0 && (
                  <small style={{ opacity: 0.2 }}>暂无标签</small>
                )}
              </div>
            }
          >
            <a
              className="oneline"
              onClick={() => {
                ciftype({
                  ...iftype,
                  val: 'see',
                  title: '查看详情',
                  open: true,
                });
              }}
            >
              {row.name}
            </a>
          </Popover>
        </div>
      </Tooltip>
    </>
  );
}

export default CompanyName;
